<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="background-color: #f2f2f2;">
<head>
    <meta charset="UTF-8"/>
    <title>学生信息导入</title>

    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css"
          href="../../static/plugin/easyui/themes/default/easyui.css"
          th:href="@{/plugin/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" href="../../static/plugin/easyui/themes/icon.css"
          th:href="@{/plugin/easyui/themes/icon.css}">

    <link rel="stylesheet" type="text/css" href="../../static/css/style_index.css"
          th:href="@{/css/style_index.css}">
    <link rel="stylesheet" type="text/css" href="../../static/css/style_table.css"
          th:href="@{/css/style_table.css}">
    <link rel="stylesheet" type="text/css" href="../../static/plugin/layui/css/layui.css"
          th:href="@{/plugin/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" href="../../static/css/addressResourcePutIn.css"
          th:href="@{/css/addressResourcePutIn.css}">
    <script type="text/javascript" src="../../static/js/jquery.min.js"
            th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" src="../../static/js/util.js" th:src="@{/js/util.js}"></script>
    <script type="text/javascript" src="../../static/plugin/easyui/jquery.easyui.min.js"
            th:src="@{/plugin/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" src="../../static/plugin/easyui/easyui-lang-zh_CN.js"
            th:src="@{/plugin/easyui/easyui-lang-zh_CN.js}"></script>
    <link rel="stylesheet" type="text/css" href="../../static/css/style_table.css"
          th:href="@{/css/style_table.css}">
    <script type="text/javascript" src="../../static/plugin/layui/layui.all.js"
            th:src="@{/plugin/layui/layui.all.js}"></script>
    <script th:src="@{/js/common.js}" src="../../static/js/common.js"></script>
</head>
<body>
<div id="form-box">
    <input type="hidden" id="batchId" th:value="${batchId}">
    <div style="min-width:1100px;text-align: center; ">

        <!--条件查询 start-->
        <form>
            学生姓名:
            <div class="layui-input-inline distance" style="width: 300px;">
                <input type="text" class="layui-input" id="studentName"
                       name="studentName"
                       placeholder="请输入学生姓名" style="width: 300px;">
            </div>
            <button class="btn btn-primary" type="button" style="margin-left: 20px;" onclick="refresh()">
                查&nbsp;&nbsp;询
            </button>
            <button class="btn btn-danger" id="delete" type="button" style="margin-left: 20px;"
                    onclick="doDelete()">删&nbsp;&nbsp;除
            </button>

            <button class="btn btn-info" id="putIn" type="button" style="margin-left: 20px;"
                    onclick="doPutIn()">入&nbsp;&nbsp;库
            </button>

            <span>入库班级：</span>
            <select id='class'  name='classId' class="classId">
                <option value="" selected>全部</option>
            </select>

            <a class="back_btn clear" style="margin-top: 5px;margin-right: 20px;"
               onclick="javascript:history.go(-1);">
                <img src="../static/images/return.png" th:src="@{/images/return.png}">
                <span>返回</span>
            </a>

        </form>


        <hr/>
    </div>
    <!--内容-->
    <div class="standardcontentbox">
        <!--table start-->
        <table id="table" width="100%" class="one_table">
            <tr>
                <th style="width: 25px"></th>
                <th style="width: 25px"><input type="checkbox" id="operate"
                                               onclick="selectAll()"/></th>
                <th style="width: 100px">学生姓名</th>
                <th style="width: 100px">就读方式</th>
                <th style="width: 100px">家庭住址</th>
                <th style="width: 50px">学生性别</th>
                <th style="width: 70px">出生日期</th>
                <th style="width: 100px">父母姓名</th>

            </tr>
            <tr id="rowTempalte" style="display: none">
                <td id="td0" style="line-height:36px;"></td>
                <td id="td1"></td>
                <td id="td2"></td>
                <td id="td3"></td>
                <td id="td4"></td>
                <td id="td5"></td>
                <td id="td6"></td>
                <td id="td7"></td>
            </tr>
        </table>
        <!--table end-->

        <div style="overflow: hidden;">
            <!--分页栏start-->
            <div id="zhuanye" style="margin-top: 10px;">
                <div id="datanumDiv">显示</div>
                <select id="rows" style="float:left;margin-top: 7px;" onchange="refresh()">
                    <option class="xialashu">10</option>
                    <option class="xialashu">20</option>
                    <option class="xialashu">50</option>
                </select>
                <div id="datatotalDiv">条记录</div>
            </div>
            <div id="pagebox" style="margin-top: 10px;">
                <ul id="pageul">
                    <li class="first" id="first" onclick="firstPage()"></li>
                    <li class="pre" id="pre" onclick="prePage()"></li>
                    <li class="pages on" id="page">1</li>
                    <li class="next" id="next" onclick="nextPage()"></li>
                    <li class="last" id="last" onclick="lastPage()"></li>
                    <li class="pages on" style="width:100px">共<span id="count"></span>条数据</li>
                </ul>
                <div style="clear:both;"></div>
            </div>
            <!--分页栏end-->
        </div>
    </div>
</div>
</body>

<script th:inline="javascript">
    $(function () {
        queryData(10, 1);
        //获取班级
        $.post("/class/getAllClass", function (data) {
            if (data.msg == 200) {
                for (var i = 0; i < data.classList.length; i++) {
                    $(".classId").append("<option value=" + data.classList[i].id + ">" + data.classList[i].className + "</option>");
                }
            } else {
                layer.msg(data.msg);
            }

        }, "json");
    });

    /**
     * 判断checkBox是否被全选，如果被全选，则将全选框勾上，否则不勾
     */
    function selectCheckBox() {
        var operateBox = document.getElementsByName("operate");
        var check = true;
        for (var k = 0; k < operateBox.length; k++) {
            if (!operateBox[k].checked) {
                check = false;
            }
        }
        document.getElementById('operate').checked = check;
    }

    function selectAll() {
        var operateBox = document.getElementsByName("operate");
        var flag = document.getElementById('operate').checked;
        for (var k = 0; k < operateBox.length; k++) {
            operateBox[k].checked = flag;
        }
    }

    function queryData(limit, page) {
        var postData = {
            limit: limit,
            page: page,
            batchId: $("#batchId").val()
        };
        if ($("#studentName").val() != "") {
            postData.studentName = $("#studentName").val();
        }
        $.ajax({
            url: "/studentInput/getStudentBatchDataList",
            type: "post",
            data: JSON.stringify(postData),
            dataType: "json",
            headers: {'Content-Type': 'application/json'},
            success: function (result) {
                if (result.msg == 200) {
                    $('#count').html(result.total);
                    addRow(result.rows);
                } else {
                    $('#count').html("0");
                    console.log(result.msg);
                }

            },
            error: function (error) {
                console.log(error);
            }
        });
    }

    var oId = 1;

    function addRow(data) {
        deleteRow();
        var tr = $("#rowTempalte");
        var newTr;
        var actionHtml;
        $(data).each(function (i, element) {
            actionHtml = '<input type="checkbox" onclick="selectCheckBox()"  name="operate" value="' + element.id + '"/>';
            newTr = tr.clone(true).attr('id', 'rowTempalte' + oId);
            newTr.css("display", "table-row");
            newTr.find("td#td0").html(i + 1);
            newTr.find("td#td1").html(actionHtml);
            newTr.find("td#td2").html(element.studentName);
            newTr.find("td#td3").html(element.enrollmentType);
            newTr.find("td#td4").html(element.address);
            newTr.find("td#td5").html(element.studentSex);
            newTr.find("td#td6").html(element.birth);
            newTr.find("td#td7").html(element.parent1Name);
            if (element.parent2Name != null || element.parent2Name != "") {
                newTr.find("td#td7").html(element.parent1Name + "|" + element.parent2Name);
            }
            tr.after(newTr);
            tr = newTr;
            oId = oId + 1;
        });
    }

    /**
     * @Date: 2017/12/10 0010
     * Description: 清除row
     */
    function deleteRow() {
        var length = $("#table tr").length - 2;
        for (var j = length; j > 0; j--) {
            $("#table tr:eq(" + (j + 1) + ")").remove();
        }
    }

    function doPutIn() {
        document.getElementById("putIn").onclick = null;
        var ids = new Array();
        var operateBox = document.getElementsByName("operate");
        for (var k = 0; k < operateBox.length; k++) {

            if (operateBox[k].checked) {

                ids.push(operateBox[k].value);
            }
        }
        if (isNull(ids)) {
            document.getElementById("putIn").onclick = doPutIn;
            layer.msg("请选择要入库的信息");
            return;
        }
        if(isNull($("#class").val())){
            document.getElementById("putIn").onclick = doPutIn;
            layer.msg("请选择要入库班级");
            return;
        }
        $.ajax({
            url: "/studentInput/putInStudentBatchData",
            type: "POST",
            async: false,
            data: {
                "ids": ids.join(","),
                "batchId": $("#batchId").val(),
                "classId": $("#class").val()
            },
            dataType: "json",
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            success: function (result) {
                if (result.result == 'success') {
                    document.getElementById("putIn").onclick = doPutIn;
                    layer.msg("入库成功", {time: 1000});
                    window.setTimeout("refresh()", 1000);
                } else if (result.result == 'fail') {
                    document.getElementById("putIn").onclick = doPutIn;
                    layer.msg("入库失败", {time: 1000});
                }
            },
            error: function () {
                document.getElementById("putIn").onclick = doPutIn;
                layer.msg("请求出错", {time: 1000});
            }
        })
    }

    function doDelete() {
        document.getElementById("delete").onclick = null;
        var ids = new Array();
        var operateBox = document.getElementsByName("operate");
        for (var k = 0; k < operateBox.length; k++) {

            if (operateBox[k].checked) {

                ids.push(operateBox[k].value);
            }
        }
        if (isNull(ids)) {
            document.getElementById("delete").onclick = doDelete;
            layer.msg("请选择要删除的信息");
            return;
        }
        layer.confirm('确定删除？', function (r) {
            if (r) {
                $.ajax({
                    url: "/studentInput/deleteResourceBatchData",
                    type: "POST",
                    data: {
                        "ids": ids.join(","),
                        "batchId": $("#batchId").val()
                    },
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    success: function (result) {
                        if (result.result == 'success') {
                            document.getElementById("delete").onclick = doDelete;
                            layer.msg("删除成功" + result.successNum + "条，失败" + result.failNum + "条", {time: 1000});
                            window.setTimeout("refresh()", 1500);
                        } else if (result.result == 'fail') {
                            document.getElementById("delete").onclick = doDelete;
                            layer.msg("删除失败", {time: 1000});
                        }
                    },
                    error: function () {
                        document.getElementById("delete").onclick = doDelete;
                        layer.msg("系统出错", {time: 1000});
                    }
                })
            }
        });
    }

    /**
     * @Date: 2017/12/5
     * Description:分页  rows:显示条目数  page:当前第几页  count:总条目数
     */
    function nextPage() {
        if (parseInt($('#rows').val()) * ((parseInt($('#page').text())) + 1) - parseInt($('#count').text()) >= parseInt($('#rows').val())) {
            layer.msg("已到最后一页", {time: 1000});
        } else {
            $('#page').text(parseInt($('#page').text()) + 1);
            queryData($('#rows').val(), $('#page').text());
        }
    }

    function prePage() {
        if (parseInt($('#page').text()) == 1) {
            layer.msg("已到第一页", {time: 1000});
        } else {
            $('#page').text(parseInt($('#page').text()) - 1);
            queryData($('#rows').val(), $('#page').text());
        }
    }

    function firstPage() {
        if (parseInt($('#page').text()) == 1) {
            layer.msg("已到第一页", {time: 1000});
        } else {
            $('#page').text(1);
            queryData($('#rows').val(), $('#page').text());
        }
    }

    function lastPage() {
        if (parseInt($('#rows').val()) * ((parseInt($('#page').text())) + 1) - parseInt($('#count').text()) >= parseInt($('#rows').val())) {
            layer.msg("已到最后一页", {time: 1000});
        } else {
            $('#page').text(Math.ceil(parseInt($('#count').text()) / parseInt($('#rows').val())));
            queryData($('#rows').val(), $('#page').text());
        }
    }

    function refresh() {
        $('#page').text(1);
        queryData($('#rows').val(), 1);
    }
</script>
</html>